<style scoped lang="scss">
    ::v-deep .categoryDialog {
        width: 90% !important;
        max-width: 1100px;

        .el-dialog__body {
            padding-bottom: 30px;
            min-height: 450px;
        }
    }

    ::v-deep .el-dialog__body {
        padding-top: 20px;
    }

    ::v-deep .editDialog {
        width: 90% !important;
        max-width: 700px;

        .el-dialog__body {
            padding-bottom: 0px;
        }
    }
</style>

<template>
    <div>
        <div class="page" v-loading="loading">
            <div>
                <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd(null)">添加分类</el-button>
            </div>
            <el-table :data="tableData" row-key="id" :tree-props="{children: 'children'}" v-loading="loading">
                <el-table-column property="name" label="分类名称" width="200"></el-table-column>
                <el-table-column property="id" label="Id" width="80"></el-table-column>
                <el-table-column property="seoTitle" label="SEO标题" min-width="300" show-overflow-tooltip></el-table-column>
                <el-table-column property="showInNav" label="导航显示" min-width="100">
                    <template slot-scope="scope"><i class="el-icon-success" style="color: #13ce66; font-size: 18px;"
                                                    v-show="scope.row.showInNav"></i></template>
                </el-table-column>
                <el-table-column property="showInSide" label="侧栏显示" min-width="100">
                    <template slot-scope="scope"><i class="el-icon-success" style="color: #13ce66; font-size: 18px;"
                                                    v-show="scope.row.showInSide"></i></template>
                </el-table-column>
                <el-table-column property="sortRank" label="排序权重" min-width="100"></el-table-column>
                <el-table-column label="操作" width="140">
                    <template slot-scope="scope">
                        <el-button type="" icon="el-icon-edit" circle size="mini" @click="handleEdit(scope.row)"
                                   title="修改"></el-button>
                        <el-button type="" icon="el-icon-plus" circle size="mini" @click="handleAdd(scope.row)"
                                   title="添加子类"></el-button>
                        <el-button type="" icon="el-icon-delete" circle size="mini" @click="handleDelete(scope.row)"
                                   title="删除"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog :title="model.id>0?'修改分类':'添加分类'" append-to-body custom-class="editDialog" top="20px"
                   :visible.sync="dialogFormVisible" :close-on-click-modal="false">
            <el-form :model="model" :rules="rules" ref="editForm" label-position="right" label-width="100px" v-loading="loading">
                <el-form-item label="父级分类">
                    <el-cascader style="width: 100%"
                                 v-model="model.parentId"
                                 placeholder="不选择默认作为一级分类"
                                 :options="tableData"
                                 :props="{ checkStrictly: true,label:'name',value:'id', emitPath:false, expandTrigger:'hover' }"
                                 clearable></el-cascader>
                </el-form-item>
                <el-form-item label="分类名称" prop="name">
                    <el-input v-model="model.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-row style="margin-bottom: 0">
                    <el-col :span="8">
                        <el-form-item label="显示在导航" prop="showInNav">
                            <el-switch v-model="model.showInNav"></el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="显示到侧栏" prop="showInSide">
                            <el-switch v-model="model.showInSide"></el-switch>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <el-form-item label="排版模式" prop="siteName">
                     <el-input v-model="model.siteName" autocomplete="off"></el-input>
                 </el-form-item>-->
                <el-form-item label="排序权重" prop="sortRank">
                    <el-input v-model="model.sortRank" autocomplete="off"></el-input>
                </el-form-item>
                <div style="border-top: 5px solid #f5f5f5; height: 20px;"></div>
                <el-form-item label="SEO标题" prop="seoTitle">
                    <el-input v-model="model.seoTitle" autocomplete="off"></el-input>
                </el-form-item>
                <!--<el-form-item label="关键词" prop="keywords">
                    <el-input v-model="model.keywords" autocomplete="off"></el-input>
                </el-form-item>-->
                <el-form-item label="网站描述" prop="description">
                    <el-input v-model="model.description" type="textarea" rows="3" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible=false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    let pagerHeader = {
        title: '分类管理',
        desc: '在这里可以添加、修改、删除分类；添加分类时不选父级分类则添加为一级大类，若选择一个父类，则在其下添加小类；修改时可以更换父类；',
        breadcrumb: ['系统', '分类管理']
    }
    let modelStr = JSON.stringify({
        "parentId": null,
        "name": null,
        "seoTitle": null,
        "description": null,
        content: '',
        "sortRank": 0,
        showInSide: false,
        showInNav: false,
        "id": 0
    })

    export default {
        name: "category",
        data() {
            return {
                loading: false,
                editLoading: false,
                dialogTableVisible: false,
                dialogFormVisible: false,
                tableData: [],
                model: JSON.parse(modelStr),
                rules: {
                    name: [
                        {required: true, message: '请输入分类名称', trigger: 'blur'},
                    ],
                    seoTitle: [
                        {required: true, message: '请输入SEO标题', trigger: 'blur'},
                    ],
                    sortRank: [
                        {required: true, message: '请输入大于或等于0的数字', trigger: 'blur'},
                        {pattern: /^\d|([1-9]\d*)$/, message: '请输入大于或等于0的数字', trigger: 'blur'},
                    ],
                },
            }
        },
        activated() {
            this.init()
        },
        created() {
            this.init();
        },
        methods: {
            init() {
                this.setPageHead(pagerHeader);
                this.getData();
            },
            getData() {
                this.loading = true;
                this.$apis.articles.getCategoryTreeList({}).then(r => {
                    this.loading = false;
                    if (r.success) {
                        this.tableData = r.result;
                        console.log(r.result)
                    } else {
                        this.$apis.alert.error(r.error.message)
                    }
                }).catch(e => {
                    console.log(e)
                })
            },
            handleAdd(item) {
                //item不为null 则在item下面添加子类
                if (Number(this.model.id) > 0) {
                    //如果model里面有数据就清空
                    this.model = JSON.parse(modelStr)
                }
                if (item) {
                    this.model.parentId = item.id;
                }
                this.dialogFormVisible = true;
                this.$nextTick(x => {
                    this.$refs.editForm.clearValidate();
                })
            },
            handleEdit(item) {
                console.log(item)
                if (item.content === null) item.content = '';
                this.model = JSON.parse(JSON.stringify(item))
                this.dialogFormVisible = true;
                this.$nextTick(x => {
                    this.$refs.editForm.clearValidate();
                })
            },
            handleDelete(item) {
                this.$confirm('确定要删除' + item.name + '？', '', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loading = true;
                    this.$apis.articles.deleteCategory(item.id).then(r => {
                        this.loading = false
                        if (r.success) {
                            this.$msg.notify.success('删除成功');
                            this.getData()
                        } else {
                            this.$msg.alert.error(r.error.message)
                        }
                    })
                }).catch(e => {
                });
            },
            submitForm() {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.editLoading = true
                        this.$apis.articles.saveCategory(this.model).then(r => {
                            this.editLoading = false
                            if (r.success) {
                                this.$msg.notify.success(this.model.id > 0 ? '修改成功' : '添加成功');
                                this.model = JSON.parse(modelStr)
                                this.getData()
                                this.dialogFormVisible = false
                            } else {
                                this.$msg.alert.error(r.error.message)
                            }
                        }).catch(e => {
                            this.editLoading = false
                            this.$msg.alert.error('出现未知错误')
                        })
                    }
                })
            },
        },
    }
</script>
